// ==UserScript==
// @name Cytube playlist tool
// @namespace playlisttool
// @description Cytube playlist tool
// @grant GM_addStyle
// @include https://cytu.be/r/*
// @include https://www.cytu.be/r/*
// @run-at document-end
// @version 0.0.1
// ==/UserScript==

GM_addStyle ( `
    #rightpane {
        white-space:nowrap;
        overflow-x:auto;
    }
    #rightpane-inner {
        display:inline-block;
        float:left;
        width:100%;
        overflow:hidden;
    }
    #playlist_area {
        width:0px;
        height:520px;
        border-width:2px;
        background-color:#2e3338;
        color:#fff;
        font-weight:400;
        padding:5px;
        display:inline-block;
        margin-left:30px;
    }
` );

document.getElementById("rightpane").innerHTML += "<Textarea id='playlist_area'></Textarea>";
document.getElementById("videocontrols").innerHTML += "<button class='btn btn-sm btn-default' id='toggle_button'>Get playlist links</button>";
document.getElementById("toggle_button").onclick = function(){toggle();};

var list = [];
var d = document.getElementById("playlist_area");
var r = document.getElementById("rightpane-inner");
var b = document.getElementById("toggle_button");

d.style.visibility="hidden";
d.onclick = function(){d.style.borderColor=null;};

function check(){
    var matches = document.querySelectorAll(".qe_title");
    for(var i = 0; i < matches.length; i++){
        if(!list.includes(matches[i])){
           list.push(matches[i]);
           d.value += (matches[i].innerHTML + "\n" + matches[i].getAttribute("href") + "\n\n");
           d.style.borderColor="#42b142";
        }
    }
}

function toggle(){
    if(d.style.visibility == "hidden"){
        if(list == ""){
            check();
            window.setInterval(check, 30000);
        }
        d.style.visibility = "visible";
        d.style.width="50%";
        r.style.width = "50%";
        b.innerHTML = "Hide playlist links";
    }
    else if(d.style.visibility == "visible"){
        d.style.visibility = "hidden";
        d.style.width = "0px"
        r.style.width = "100%";
        b.innerHTML = "Show playlist links";
    }
}